import { Table } from "antd"
import lessModule from "./index.module.less"
import HomePage_TableComponent from "../../../table"
import { useEffect, useRef, useState } from "react"
import { $eventBus, $EventBus_off, $EventBus_on } from "../../../../../../common/utils"
import HomePage_CardTitleComponent from "../../../cardtitle"
import { modeType } from "../../../../../../common/interface"
// 主页-分析组件-数据统计组件
interface homePageAnalysisComponentDataStaticComponentInterface {
    mode?: modeType
    tableName: string
    tableReferenceHeight: number
    monitoringType?: string
    paramsData: object
    sourceData: object
}
const HomePage_AnalysisComponent_DataStaticComponent: React.FC<homePageAnalysisComponentDataStaticComponentInterface> = (props) => {
    const otherListRef = useRef<Array<object>>([])
    const [otherList, setOtherList] = useState<Array<object>>([])
    const columnList = [
        {

            title: props.tableName,
            dataIndex: "id",
            minWidth: 95,
            render: (text: string, record: object, idx: number) => props.tableName === "时段名称" ? `时段${idx ? "B" : "A"}` : props.paramsData[props.mode === "single" ? "index" : "deviceList"]?.[idx]
        },
        {

            title: '游标值',
            dataIndex: 'cursorValue',
            minWidth: 60,
            align: "right",
            render: (text: string) => <span style={{ color: "#52C41A" }}>{text ?? "-"}</span>
        },
        {

            title: '最大幅值',
            dataIndex: 'max',
            minWidth: 70,
            align: "right",
            render: (text: string) => <span style={{ color: "#52C41A" }}>{text ?? "-"}</span>
        },
        {

            title: '标准差',
            dataIndex: 'standardDeviation',
            minWidth: 60,
            align: "right",
            render: (text: string) => <span style={{ color: "#52C41A" }}>{text ?? "-"}</span>
        },
        {
            title: '平均值',
            dataIndex: 'mean',
            minWidth: 60,
            align: "right",
            render: (text: string) => <span style={{ color: "#52C41A" }}>{text ?? "-"}</span>
        },
    ]

    // 广播函数数据
    const eventBusFuncData = {
        cursorValue: (data: object) => {
            "idx" in data["data"] ? otherListRef.current[data["data"]["idx"]]["cursorValue"] = data["data"]["value"] :
                data["data"]["list"]?.forEach((item: string, idx: number) => {
                    otherListRef.current[idx]["cursorValue"] = item
                })
            setOtherList([...otherListRef.current])
        },
    }

    useEffect(() => {
        if (Object.keys(props.sourceData).length) {
            otherListRef.current = props.sourceData["otherList"]
            setOtherList([...otherListRef.current])
        }
    }, [props.sourceData])

    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        return () => {
            $EventBus_off(eventBusFuncData)
        }
    }, [])

    return (

        <div className={lessModule["homePageAnalysisComponentDataStaticComponent"]}  >
            <header className={lessModule["homePageAnalysisComponentDataStaticComponent-header"]}>
                <HomePage_CardTitleComponent title="数据统计" />
            </header>
            <main className={lessModule["homePageAnalysisComponentDataStaticComponent-main"]}>
                <HomePage_TableComponent name="homePageAnalysisComponentDataStaticComponentTable" isHideBothEnds isHidePagination tableReferenceHeight={props.tableReferenceHeight} alignRightList={["游标值", "最大幅值", "标准差", "平均值"]} columnList={columnList} sourceData={{ list: otherList }} />
            </main>
        </div>
    )
}


export default HomePage_AnalysisComponent_DataStaticComponent